<template>
  <CompOperate
      :field="field"
      :designer="designer"
      :design-state="designState"
      :parent-list="parentList"
      :parent-widget="parentWidget"
      :sub-form-row-id="subFormRowId"
      :sub-form-row-index="subFormRowIndex"
      :sub-form-col-index="subFormColIndex"
      :index-of-parent-list="indexOfParentList"
      :display-style="field['options'].displayStyle"
  >
    <div
        :key="widgetKey"
        :style="getStyle('viewArea')"
        class="scene-DRC-doctor-introduction-widget"
        :class="{'scene-introduction-pause-widget': widgetClassName}"
    >
      <div class="widget-inside">
        <div class="date-time">
          <div class="time item" :style="getStyle('dateInfo')">{{ time }}</div>
          <div class="week item" :style="getStyle('weekTimeInfo')">{{ getWeekInfo(week) }}</div>
          <div class="date item" :style="getStyle('weekTimeInfo')">{{ date }}</div>
        </div>
        <div class="doctor-room-info">
          <template v-for="item in getRoomDoctorInfo">
            <div class="dept-state-info" :class="isPauseInfo(item).className">
              <div class="flex-box dept-info">
                <div class="flex-box-left flex-item" :style="getStyle('roomInfo')">
                  <ScrollX>{{ getRoomDeptInfo[optionsInfo.roomInfo.roomNameKey || 'deptName'] }}</ScrollX>
                </div>
                <div class="flex-box-right flex-item" v-if="!!(optionsInfo?.logoInfo?.value?.url)">
                  <img class="logo" :src="pictureResource" alt="企业Logo"/>
                </div>
              </div>
              <el-divider></el-divider>
              <div class="state-info">
                <div class="state-info-inside" :style="getStyle('roomState')">
                  {{ isPauseInfo(item).label }}
                </div>
              </div>
            </div>
            <template v-if="isPauseInfo(item).state">
              <div class="doctor-info">
                <div class="doctor-details">
                  <div class="picture-info">
                    <img
                        alt="医生"
                        @error='handleError'
                        :src="getDoctorPicture(item)"
                    />
                  </div>
                  <div class="details-info">
                    <div class="name-level">
                      <div class="name" :style="getStyle('doctorName')">
                        {{ (item.workerName) || '\u00a0' }}
                      </div>
                      <div class="level" :style="getStyle('doctorLevel')">
                        <ScrollX>{{ (item.workerTitle) || '\u00a0' }}</ScrollX>
                      </div>
                    </div>
                    <div class="professional" :style="getStyle('doctorEducation')">
                      <ScrollX>{{ (item.workerDegree) || '\u00a0' }}</ScrollX>
                    </div>
                    <div class="introduce">
                      <div class="container" :style="getStyle('doctorIntroduce')">
                        <ScrollY
                            :pageDuration="10"
                            :content="(item.workerIntro) || '\u00a0'"
                        />
                      </div>
                    </div>
                  </div>
                </div>
                <div class="genius-area">
                  <div class="sign-info" :style="getStyle('doctorGeniusSign')">擅长项目</div>
                  <div class="genius-info" :style="getStyle('doctorGenius')">
                    <ScrollY
                        :pageDuration="10"
                        :content="(item.workerSpecialty) || '\u00a0'"
                    />
                  </div>
                </div>
              </div>
            </template>
          </template>
        </div>
      </div>
    </div>
  </CompOperate>
</template>

<script>
import {getWeek, pxToVw} from '@/utils/common';
import emitter from "@/utils/designer/emitter";
import {buildParentApi} from "@/utils/designer/util";
import ScrollX from '@c/public/seamlessScroll/ScrollX.vue';
import ScrollY from '@c/public/seamlessScroll/ScrollY.vue';
import mixin from "@sc/templateDetails/modules/homeMiddle/fieldMixin";
import CompOperate from "@c/public/form-designer/devType/modules/compOperate.vue";
import dayjs from "dayjs";
import {v4 as uuid} from "uuid";

let buildParent = buildParentApi();
export default {
  name: "scene-DRC-doctor-introduction-widget",

  componentName: "FieldWidget", //必须固定为FieldWidget，用于接收父级组件的broadcast事件

  mixins: [emitter, mixin],

  components: {
    CompOperate,
    ScrollY,
    ScrollX,
  },

  props: {
    widget: Object,
    devType: {
      type: Boolean,
      default: false,
    },
    field: Object,
    parentWidget: Object,
    parentList: Array,
    indexOfParentList: Number,
    designer: Object,
    designState: {
      type: Boolean,
      default: false,
    },
    subFormRowIndex: {
      /* 子表单组件行索引，从0开始计数 */ type: Number,
      default: -1,
    },
    subFormColIndex: {
      /* 子表单组件列索引，从0开始计数 */ type: Number,
      default: -1,
    },
    subFormRowId: {
      /* 子表单组件行Id，唯一id且不可变 */ type: String,
      default: "",
    },
    headTitle: {
      type: String,
      default: "",
    },
    visibleTitle: {
      type: Boolean,
    },
    //prop传入的表单JSON配置
    parentApi: {
      type: Object,
      default: () => buildParentApi()
    },
  },

  data() {
    return {
      isPause: false,
      widgetKey: uuid(),
      optionsInfo: Object(),
      date: dayjs().format("YYYY年MM月DD日"),
      week: dayjs().format('dddd'),
      time: dayjs().format("HH:mm"),
      pause: require("@a/images/design/pause.png"),
      header: require("@a/images/design/header.jpeg"),
      code1: require("@a/images/design/placeholder-code.png"),
    }
  },

  computed: {
    // 设置的行内样式
    getStyle() {
      return function (val) {
        const self = this;
        let info = (self.optionsInfo) || Object();
        let {
          dateInfo,
          weekTimeInfo,
          roomInfo,
          roomState,
          doctorName,
          doctorLevel,
          doctorIntroduce,
          doctorGeniusSign,
          doctorGenius,
          doctorEducation
        } = info;
        let Obj = Object();
        switch (val) {
          case 'viewArea':
            Reflect.set(Obj, 'height', pxToVw(info.viewHeight));
            return Obj;
          case 'dateInfo':
            Reflect.set(Obj, 'fontWeight', (dateInfo.fontWeight));
            Reflect.set(Obj, 'fontSize', pxToVw(dateInfo.fontSize));
            Reflect.set(Obj, 'color', (dateInfo.fontColor));
            return Obj;
          case 'weekTimeInfo':
            Reflect.set(Obj, 'fontWeight', (weekTimeInfo.fontWeight));
            Reflect.set(Obj, 'fontSize', pxToVw(weekTimeInfo.fontSize));
            Reflect.set(Obj, 'color', (weekTimeInfo.fontColor));
            return Obj;
          case 'roomState':
            Reflect.set(Obj, 'fontWeight', (roomState.fontWeight));
            Reflect.set(Obj, 'fontSize', pxToVw(roomState.fontSize));
            Reflect.set(Obj, 'color', (roomState.fontColor));
            return Obj;
          case 'roomInfo':
            Reflect.set(Obj, 'fontWeight', (roomInfo.fontWeight));
            Reflect.set(Obj, 'fontSize', pxToVw(roomInfo.fontSize));
            Reflect.set(Obj, 'color', (roomInfo.fontColor));
            return Obj;
          case 'doctorName':
            Reflect.set(Obj, 'fontWeight', (doctorName.fontWeight));
            Reflect.set(Obj, 'fontSize', pxToVw(doctorName.fontSize));
            Reflect.set(Obj, 'color', (doctorName.fontColor));
            return Obj;
          case 'doctorLevel':
            Reflect.set(Obj, 'fontWeight', (doctorLevel.fontWeight));
            Reflect.set(Obj, 'fontSize', pxToVw(doctorLevel.fontSize));
            Reflect.set(Obj, 'color', (doctorLevel.fontColor));
            return Obj;
          case 'doctorEducation':
            Reflect.set(Obj, 'fontWeight', (doctorEducation.fontWeight));
            Reflect.set(Obj, 'fontSize', pxToVw(doctorEducation.fontSize));
            Reflect.set(Obj, 'color', (doctorEducation.fontColor));
            return Obj;
          case 'doctorIntroduce':
            Reflect.set(Obj, 'fontWeight', (doctorIntroduce.fontWeight));
            Reflect.set(Obj, 'fontSize', pxToVw(doctorIntroduce.fontSize));
            Reflect.set(Obj, 'color', (doctorIntroduce.fontColor));
            return Obj;
          case 'doctorGeniusSign':
            Reflect.set(Obj, 'fontWeight', (doctorGeniusSign.fontWeight));
            Reflect.set(Obj, 'fontSize', pxToVw(doctorGeniusSign.fontSize));
            Reflect.set(Obj, 'color', (doctorGeniusSign.fontColor));
            return Obj;
          case 'doctorGenius':
            Reflect.set(Obj, 'fontWeight', (doctorGenius.fontWeight));
            Reflect.set(Obj, 'fontSize', pxToVw(doctorGenius.fontSize));
            Reflect.set(Obj, 'color', (doctorGenius.fontColor));
            return Obj;
        }
      }
    },

    // 获取医生头像
    getDoctorPicture() {
      return function (row) {
        let isPause = (row?.isPause);
        let header = '/tpleditor/resource/assets/images/header.png';
        if (!isPause) {
          return (row?.workerPicture) || header
        } else {
          return (row?.workerPicture) || header;
        }
      }
    },

    pictureResource() {
      let {logoInfo} = this.optionsInfo;
      if (this.$lodash.isObject(logoInfo.value)) {
        return logoInfo?.value?.url;
      } else {
        return logoInfo?.value;
      }
    },

    //是否暂停接诊
    isPauseInfo() {
      return function (row) {
        let params = Object();
        let isPause = (row?.isPause);
        let onlineStatus = (row?.onlineStatus) || '2';
        if (row && Reflect.has(row, 'isPause') && !isPause) {
          this.isPause = false;
          switch (onlineStatus) {
            case '0':
              Reflect.set(params, 'className', 'progress');
              Reflect.set(params, 'state', true);
              Reflect.set(params, 'label', '面诊中');
              break
            case '1':
              Reflect.set(params, 'className', 'progress');
              Reflect.set(params, 'state', false);
              Reflect.set(params, 'label', '待面诊');
              break
            case '2':
              Reflect.set(params, 'className', 'pause');
              Reflect.set(params, 'state', false);
              Reflect.set(params, 'label', '休息中');
              break
          }
        } else {
          this.isPause = true;
          switch (onlineStatus) {
            case '0':
              Reflect.set(params, 'className', 'progress');
              Reflect.set(params, 'state', true);
              Reflect.set(params, 'label', '面诊中');
              break
            case '1':
              Reflect.set(params, 'className', 'progress');
              Reflect.set(params, 'state', true);
              Reflect.set(params, 'label', '待面诊');
              break
            case '2':
              Reflect.set(params, 'className', 'pause');
              Reflect.set(params, 'state', false);
              Reflect.set(params, 'label', '休息中');
              break
          }
        }
        return params
      }
    },

    // 获取全量医患信息
    getRoomDoctorInfo() {
      let devType = (this.devType);
      let roomDoctorInfo = this.$store.getters['getRoomDoctorInfo'];
      let list = devType ? (roomDoctorInfo.apiData) : (roomDoctorInfo.mockData)
      if (!!(list?.length)) {
        return list.slice(0, 1);
      } else {
        return new Array(1).fill({});
      }
    },

    // 获取科室信息
    getRoomDeptInfo() {
      let devType = (this.devType);
      let roomDoctorInfo = this.$store.getters['getRoomDeptInfo'];
      return devType ? (roomDoctorInfo.apiData) : (roomDoctorInfo.mockData)
    },

    timeType() {
      return this.optionsInfo.dateInfo.value;
    },

    // 获取日期
    getWeekInfo() {
      return function (info) {
        return getWeek(info);
      };
    },

    //判断医生队列是否是空
    widgetClassName() {
      let roomDoctorInfo = this.getRoomDoctorInfo;
      let roomDoctorInfo2 = [{}];
      const result = this.$lodash.filter(roomDoctorInfo, (element) => !this.$lodash.isEmpty(element));
      if (result?.length) {
        let firstDoctor = result[0] || Object();
        // 在线状态 0:在线  1:暂停  2:退出
        return parseInt(firstDoctor.onlineStatus) === 2
      } else {
        return true
      }
    }
  },

  created() {
    this.registerToRefList();
    this.initEventHandler();
    this.handleOnCreated();
  },

  mounted() {
    this.handleOnMounted();
  },

  methods: {
    // 接收父组件传递过来的数据
    executeMethod(key, data) {
      switch (key) {
        case "roomDeptInfo":
          this.$store.dispatch('setRoomDeptInfo', data)
          break
        case "roomDoctorInfo":
          this.widgetKey = uuid();
          this.$store.dispatch('setRoomDoctorInfo', this.$lodash.cloneDeep(data))
          break
        case "timeDate":
          this.updateTime(data);
          break;
      }
    },

    // 获取时间
    updateTime(val) {
      let timeType = this.timeType;
      if (!!val) {
        let msg = JSON.parse(val);
        if (!!msg && !!msg.timestamp) {
          let timestamp = dayjs.unix(msg.timestamp);
          [this.week, this.date, this.time] = dayjs(timestamp)
              .format(`d,${timeType},HH:mm`)
              .split(",");
        } else {
          [this.week, this.date, this.time] = dayjs()
              .format(`d,${timeType},HH:mm`)
              .split(",");
        }
      } else {
        [this.week, this.date, this.time] = dayjs()
            .format(`d,${timeType},HH:mm`)
            .split(",");
      }
    },

    // 滚动结束
    handleScrollEnd() {},

    handleError(event) {
      event.target.src = '/tpleditor/resource/assets/images/header.png'
    },
  },


  watch: {
    field: {
      handler: function (val) {
        let key = val.options.config;
        this.optionsInfo = val.options[key];
      },
      deep: true,
      immediate: true
    },

    // 监听时间更新
    timeType: {
      handler: function (val) {
        if (val) {
          this.updateTime();
        }
      },
      deep: true,
      immediate: true,
    },
  },

  destroyed() {
    this.unregisterFromRefList();
  },

};
</script>

<style lang="scss" scoped>
.scene-DRC-doctor-introduction-widget {
  height: 100%;
  font-size: 60px;
  background: linear-gradient(180deg, #CBD3C8 0%, #EEEFED 9%, #F8F8F8 42%, #F8F8F8 100%);

  &:has(.pause) {
    @include background('design/1-22×2');
  }

  .widget-inside {
    height: 100%;
    padding: 0 48px;
    box-sizing: border-box;
  }

  .date-time {
    height: 186px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;

    .item {
      font-weight: 500;
      font-size: 28px;
      color: #282E2A;
      align-self: flex-end;
      align-items: flex-end;
      align-content: flex-end;
      padding: 0 8px 40px 8px;
    }

    .time {
      font-weight: 500;
      font-size: 70px;
      color: #282E2A;
    }

    .week,
    .date {
      position: relative;
      bottom: 10px;
    }
  }

  .doctor-room-info {
    height: calc(100% - 186px);

    .dept-state-info {
      width: 100%;
      height: 580px;
      padding: 0 48px;
      border-radius: 12px;
      box-sizing: border-box;
      overflow: hidden;
      background: #547048;

      .dept-info {
        height: 50px;
        overflow: hidden;
        min-width: calc(100% - 96px);

        .flex-item {
          border: none;
          font-size: 86px;
          align-items: flex-end;
          color: #FFFFFF;
          margin-bottom: 22px;
          background: transparent;

          :deep(.st-inner) {
            align-self: flex-end;
          }
        }

        .flex-box-left {
          font-size: 86px;
          white-space: nowrap;
        }

        .flex-box-right {
          justify-content: flex-end;
          text-align: right;

          img {
            max-width: 100%;
            max-height: 76px;
            object-fit: contain;
          }
        }
      }

      .state-info {
        display: flex;
        align-self: center;
        align-items: center;
        align-content: center;
        justify-content: center;
        width: 100%;
        font-size: 184px;
        color: white;
        box-sizing: border-box;
        height: calc(100% - 83px - 96px - 20px);
        overflow: hidden;

        .state-info-inside {
          width: 100%;
          padding: 60px 0;
          justify-content: center;
          align-items: center;
          align-content: center;
          text-align: center;
          align-self: center;
        }
      }
    }

    .pause {
      height: 1020px !important;

      .state-info .state-info-inside {
        padding: 140px 0;
        color: #547048 !important;
        border-radius: 16px;
        overflow: hidden;
        @include background('design/1-23×2')
      }
    }

    .doctor-info {
      padding: 40px 0;
      box-sizing: border-box;
      height: calc(100% - 580px);
      overflow: hidden;

      .doctor-details {
        display: flex;
        height: 760px;
        overflow: hidden;
        flex-direction: row;

        .picture-info {
          display: flex;
          flex-direction: column;
          width: 440px;
          height: 760px;
          margin-right: 16px;
          box-sizing: border-box;
          align-self: flex-end;
          overflow: hidden;

          img {
            width: auto;
            height: 760px;
            border-radius: 8px;
            overflow: hidden;
            object-fit: cover;
          }
        }

        .details-info {
          padding-top: 120px;
          width: calc(100% - 440px - 18px);

          .name-level {
            display: flex;
            flex-direction: row;

            .name {
              width: 280px;
              font-weight: 600;
              font-size: 82px;
              color: #282E2A;
              @include singleEllipsis(280px)
            }

            .level {
              font-size: 34px;
              width: calc(100% - 280px);

              .scrollText {
                align-items: flex-end;
              }

              .st-inner {
                margin: inherit;
              }
            }
          }

          .professional {
            width: 100%;
            font-weight: 500;
            font-size: 40px;
            line-height: 1.4;
            color: #282E2A;
            margin-top: 8px;
            margin-bottom: 44px;
            box-sizing: border-box;

            .scrollText {
              align-items: flex-end;
            }

            :deep(.st-inner) {
              margin: inherit;
            }
          }

          .introduce {
            font-size: 32px;
            line-height: 1.4;
            overflow: hidden;
            height: calc(100% - 210px);

            .container {
              width: 100%;
              height: 100%;
            }
          }
        }
      }

      .genius-area {
        font-size: 34px;
        line-height: 1.4;
        box-sizing: border-box;
        height: calc(100% - 760px);
        border-top: 4px #547048 solid;
        padding-top: 56px;
        padding-left: 58px;
        width: calc(100%);
        overflow: hidden;

        .sign-info {
          width: 100%;
          color: #282E2A;
          height: auto;
          font-weight: bold;
          overflow: hidden;
          line-height: 50px;
        }

        .genius-info {
          padding-top: 10px;
          line-height: 1.46;
          color: #FFFFFF;
          height: calc(100% - 60px);
        }
      }
    }
  }

}

.scene-introduction-pause-widget {
  @include background('design/1-22×2-2');
}
</style>
